import React, { useEffect, useRef, useState } from 'react'
import { Row, Col, Card, List, Avatar, Drawer } from 'antd'
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import './Home.css'
import * as echarts from 'echarts';
import _ from 'lodash';
import {getArticle,classify} from "../../../api/api"
const { Meta } = Card;

export default function Home() {
  const [viewList, setViewList] = useState([])
  const [starList, setStart] = useState([])
  const [visible, setVisible] = useState(false);
  const [categoriesList, setCategoriesList] = useState([])
  const pieRef = useRef(null)
  const { id,username, region, role: { roleName } } = JSON.parse(localStorage.getItem("token"))
  useEffect(() => {
    const httpRequest = async () => {
      //获取文章 浏览数排序
      const res1=await getArticle({
        id,
        publishState:2,
        orderName:'look_num'
      })
      setViewList(res1.data.data)

      //获取文章 点赞排序
      const res2=await getArticle({
        id,
        publishState:2,
        orderName:'like_num'
      })
      setStart(res2.data.data)

      //获取分类列表
      const res3=await classify()
      setCategoriesList(res3.data.myChartList)

      //获取文章
      const res4=await getArticle({
        id,
        publishState:2
      })
      let obj = _.groupBy(res4.data.data, data => data.classifyName)
      let arr = []
      for (var i in obj) {
        arr.push({ value: obj[i].length, name: i })
      }
      if (visible) {
        renderPieView(arr)
      }
    }
    httpRequest()
  }, [id,visible])

  const renderPieView = (objArr) => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(pieRef.current);
    // 绘制图表
    myChart.setOption({
      title: {
        text: '当前用户文章分类图示',
        left: 'center'
      },
      tooltip:{
        trigger:'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: categoriesList.map(item => item.title)
      },
      series: [
        {
          name:'发布数量',
          type: 'pie',
          radius:'50%',
          data: objArr,
          emphasis:{
            itemStyle:{
              shadowBlur:10,
              shadowOffsetX:0,
              shadowColor:'rgba(0,0,0,0.5)'
            }
          }
        }
      ]
    });
  }
  return (
    <div className="site-card-wrapper">
      <Row gutter={16}>
        <Col span={8}>
          <Card title="用户最常浏览" bordered={true}>
            <List
              size="small"
              dataSource={viewList}
              renderItem={item => <List.Item><a href={`#/news-manage/preview/${item.id}`}>{item.title}</a></List.Item>}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="用户点赞最多" bordered={true}>
            <List
              size="small"
              dataSource={starList}
              renderItem={item => <List.Item><a href={`#/news-manage/preview/${item.id}`}>{item.title}</a></List.Item>}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="Card title" bordered={true}>
            <Card
              cover={
                <img
                  alt="example"
                  src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                />
              }
              actions={[
                <SettingOutlined key="setting" onClick={() => setVisible(true)} />,
                <EditOutlined key="edit" />,
                <EllipsisOutlined key="ellipsis" />,
              ]}
            >
              <Meta
                avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                title={username}
                description={
                  <div>
                    <b>{region ? region : '全球'}</b>
                    <span style={{
                      paddingLeft: "30px"
                    }}>{roleName}</span>
                  </div>
                }
              />
            </Card>
          </Card>
        </Col>
      </Row>
      <Drawer width={500} title="个人文章分类" placement="right" onClose={() => setVisible(false)} visible={visible}>
        <div ref={pieRef} style={{
          width: '100%',
          height: '400px',
          marginTop: '30px'
        }}></div>
      </Drawer>
    </div>
  )
}
